<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <div id="app">
        {{ message }}

        <h1 v-if="Math.random()>0.5">YES</h1>
        <h1 v-else>NO</h1>

        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
          </template>
          <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
          </template>
          <button v-on:click='change'>Toggle login type</button>
          <ul id="example">
              <li v-for="item in items">
                  {{item.message}}
              </li>
          </ul>
          <ul>
            <template v-for="item in items">
              <li>{{ item.message }}</li>
              <li class="divider" role="presentation"></li>
            </template>
          </ul>
          <div>
            <span v-for="n in 10">{{ n }} </span>
          </div>
        </div>
        <ul id="v-for-object" class="demo">
            <li v-for="(value,key,index) in object">
              {{index}}.{{key}}.{{value}}
            </li>
        </ul>
        <ul id="v-for-filter">
            <li v-for="n in evenNumbers">{{ n }}</li>
        </ul>
        <div id="todo-list-example">
            <form v-on:submit.prevent="addNewTodo">
              <label for="new-todo">Add a todo</label>
              <input
                v-model="newTodoText"
                id="new-todo"
                placeholder="E.g. Feed the cat"
              >
              <button>Add</button>
            </form>
            <ul>
              <li
                is="todo-item"
                v-for="(todo, index) in todos"
                v-bind:key="todo.id"
                v-bind:title="todo.title"
                v-on:remove="todos.splice(index, 1)"
              ></li>
            </ul>
          </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                loginType: 'username',
                items:[
                    {message:'American'},
                    {message:'Japanese'}
                ]
            },
            methods:{
                change:function (event){
                    if(app.loginType==='username'){
                        app.loginType = 'email';
                    }else{
                        app.loginType = 'username';
                    }
                }
            }
        });

        var vfor = new Vue({
            el:'#v-for-object',
            data:{
                object:{
                    firstName: 'John',
                    lastName:'Doe',
                    age:30
                }
            }
        });

        var vfilter = new Vue({
            el:"#v-for-filter",
            data:{
                numbers:[1,2,3,4,5]
            },
            computed:{
                evenNumbers:function(){
                    return this.numbers.filter(function (number){
                        return number % 2 ===0
                    })
                }
            }
        })
        Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})
    </script>
</html>
